<template>
	<view class="sharePopup">
		<!-- 分享弹框 -->
		<u-popup v-model="sharShow" mode="bottom" border-radius="20" height="300">
			<view class="sharPopup">
				<button class="shar_button" open-type="share">
					<image class="shar_button_img" src="@/static/img/houseinfo/wx.png"></image>
					<view class="shar_button_txt">分享给好友</view>
				</button>
				<button class="shar_button" @click="sharFriend">
					<image class="shar_button_img" src="@/static/img/houseinfo/pyq.png"></image>
					<view class="shar_button_txt">分享朋友圈</view>
				</button>
			</view>
		</u-popup>
		<!-- 海报弹框 -->
		<u-popup :custom-style="popupStyle" v-model="posterShow" closeable mode="center" border-radius="20">
			<view>
				<image style="width: 300px" :src="posterImg" :show-menu-by-longpress="true" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { goodsposter } from "@/api/house/house.js";
import { areaposter } from "@/api/area/area.js";
export default {
	name: "sharePopup",
	props: {
		// 生成海报接口
		shareType: {
			type: String,
			default: '1'
		},
	},
	data() {
		return {
			// 分享显隐
			sharShow: false,
			// 图片弹窗显隐
			posterShow: false,
			// 图片路径
			posterImg: '',
			// 弹窗样式
			popupStyle: {
				background: "rgba(0,0,0,0)",
				zIndex: 999999,
			},
		};
	},
	created() {
		wx.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ["shareAppMessage"]
		})
	},
	onShow() {
		console.log('ssss', this.shareData);
	},
	// 用户转发
	onShareAppMessage(e) {
		console.log('分享好友列表', e);
		let path = this.shareParams.pathUrl;
		if (e.from === 'button') { // 来自页面内分享按钮	
			return {
				title: '汇觅管家',
				path: path,
				imageUrl: this.shareParams.imageUrl,
			}
		}
	},
	methods: {
		Ishow(params) {
			this.shareParams = params
			this.sharShow = true
			console.log('传递来的数据', this.shareParams);
		},
		// 分享海报
		async sharFriend() {
			this.sharShow = false;
			uni.showLoading({
				title: '分享码生成中',
			})
			// 添加时间戳作为参数
			const timestamp = Date.now();
			// 生成海报接口
			console.log('船舰来的', this.shareData);
			let res = ''
			if (this.shareType == '1') {
				res = await goodsposter(this.shareParams)
			} else {
				res = await areaposter(this.shareParams)
			}
			let settings = require('@/settings.js')
			if (res.data.code == 200) {
				if (res.data.msg) {
					this.posterImg = settings.imageUrl + res.data.msg + `?timestamp=${timestamp}`
					console.log('海报图片', this.posterImg);
					this.posterShow = true;
				} else {
					uni.showToast({
						title: '生成海报失败',
						icon: 'none',
						duration: 2000
					})
				}
				// this.saveAlbum() // 保存相册方法
			} else {
				uni.hideLoading()
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 3000
				})
			}
		},

		// 保存图片到相册
		saveAlbum() {
			uni.hideLoading();
			uni.showLoading({
				title: '保存海报中'
			})
			uni.downloadFile({
				url: this.posterImg,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function (data) {
								console.log("保存成功", data);
								uni.hideLoading()
								uni.showToast({
									icon: 'success',
									title: '保存成功',
									duration: 2000
								})
							},
							fail: (err) => {
								console.log("保存失败", err);
								uni.hideLoading()
								uni.showToast({
									icon: 'error',
									title: '保存失败',
									duration: 2000
								})
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
									console.log("再次发起授权")
									this.openSetting();
								}
							}
						})
					}
				},
				fail: function (err) {
					console.log("保存失败", err);
					uni.hideLoading()
					uni.showToast({
						icon: 'error',
						title: '保存失败',
						duration: 2000
					})
				}
			})
		},
		// 授权
		openSetting() {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '请授权【保存到相册】才能使用分享朋友圈功能',
				success(res) {
					if (res.confirm) {
						uni.openSetting({
							success(settingdata) {
								console.log("权限", settingdata)
								if (settingdata.authSetting['scope.writePhotosAlbum']) {
									uni.showToast({
										title: '授权成功',
										icon: 'success',
										duration: 2000
									})
									// that.saveAlbum() // 保存相册方法
								} else {
									uni.showToast({
										title: '授权失败',
										icon: 'none',
										duration: 2000
									})
								}
							}
						})
					}
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.sharPopup {
	display: flex;
	z-index: 999999;

	.shar_button {
		width: 50%;
		height: 100%;
		padding: 25rpx 0 0 0;
		background-color: #ffffff;

		.shar_button_img {
			width: 100rpx;
			height: 100rpx;
		}

		.shar_button_txt {
			color: #333333;
			font-size: 30rpx;
			margin-top: -40rpx;
		}
	}
}

/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: #606266;
	background: linear-gradient(to right, #fff8c3, #ffcc33);
	padding: 12upx 30upx;

	.share-icon {
		display: flex;
		align-items: center;
		width: 38px;
		height: 16px;
		line-height: 1;
		border: 1px solid #FF9800;
		border-radius: 2px;
		position: relative;
		overflow: hidden;
		font-size: 12px;
		color: #FF5722;

		&:after {
			content: '';
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			left: -20upx;
			top: -12upx;
			position: absolute;
			background: #FF9800;
		}
	}

	.icon-favor_fill_light {
		position: relative;
		z-index: 1;
		font-size: 24upx;
		margin-left: 2upx;
		margin-right: 10upx;
		color: #fff;
		line-height: 1;
	}

	.tit {
		font-size: 14px;
		margin-left: 10upx;
	}

	.icon-mark {
		padding: 10upx;
		font-size: 30upx;
		line-height: 1;
	}

	.share-btn {
		flex: 1;
		text-align: right;
		font-size: 12px;
		color: #FF5722;
	}

	.icon-right {
		font-size: 12px;
		margin-left: 4upx;
		color: #fa436a;

	}
}
</style>